<!--
 * @company : 版权所属 四川北星惯牌科技有限公司
 * @contact : 刘经理 19326416371
 -->
<template>
	<view class="captainln-box">
		<view class="captainln-from flex">
			<text class="title">信息填写</text>
			<view class="from-box">
				<view class="from-item flex-row-center">
					<text class="from-name">姓名</text>
					<up-input border="none" placeholderClass="placeholderClass" fontSize="26rpx" color="#DEDEDE"
						placeholder="请输入姓名" v-model="captainInfo.name"></up-input>
				</view>
				<view class="from-item flex-row-center">
					<text class="from-name">手机号</text>
					<up-input :disabled="true" border="none" type='number' placeholderClass="placeholderClass"
						fontSize="26rpx" color="#DEDEDE" placeholder="请输入手机号" v-model="captainInfo.mobile"></up-input>
				</view>
				<view class="from-item flex-row-center">
					<text class="from-name">验证码</text>
					<up-input color="#DEDEDE" v-model="captainInfo.code" type="number" placeholder="请输入验证码"
						border="none" :customStyle="customStyle" placeholderClass="placeholderClass">
						<template #suffix>
							<view class="suffix-box flex-center">
								<up-code ref="uCodeRef" @change="codeChange" seconds="60" changeText="X秒重新获取"></up-code>
								<view class="getCode-btn flex-center" @click="getCode">
									<text class="text">{{codeTips}}</text>
								</view>
							</view>
						</template>
					</up-input>
				</view>
				<view class="from-item flex-row-center">
					<text class="from-name">身份证号</text>
					<up-input maxlength="18" border="none" type='idcard' placeholderClass="placeholderClass"
						fontSize="26rpx" color="#DEDEDE" placeholder="请输入身份证号" v-model="captainInfo.idcard"></up-input>
				</view>
			</view>
			<!-- 提交 -->
			<view class="submit-box flex-center">
				<up-button :customStyle="{'color':'#186059','height':'84rpx'}" @click="submitAuthentication" text="立即提交"
					loadingText="提交中" :loading="loadingState" shape="circle"
					color="linear-gradient( 270deg, #94DEAC 0%, #7CDEC7 47%, #79DED3 100%)"></up-button>
			</view>
			<view class="agreement-box flex-center">
				<up-checkbox labelColor="#999999" shape="circle" size="30rpx" labelSize="24rpx" label="已阅读并同意" activeColor="#8BDEB7"
					@change="changeChecked" name="agree" :checked="captainInfo.checked">
				</up-checkbox>
				<view class="content flex-row-center">
					<text class="agreement-name" @click="toProtocol(1)">《平台协议》</text>
					<text class="text">与</text>
					<text class="agreement-name" @click="toProtocol(2)">《隐私协议》</text>
				</view>
			</view>
		</view>
	</view>
</template>

<script setup>
	import {
		isValidPhoneNumber,
		validateForm
	} from '@/utils/utools.js';
	import {
		userInfoStore
	} from '../../stores/user';
	const userStore = userInfoStore();
	const codeTips = ref('获取验证码');
	const uCodeRef = ref(null);
	const rules = {
		name: {
			required: true,
			msg: '请输入姓名'
		},
		idcard: {
			required: true,
			len: 18,
			// reg: /^[1-9]\d{5}[1-9]\d{3}((0\d)|(1[0-2]))(([0|1|2]\d)|3[0-1])\d{3}([0-9]|X)$/,
			msg: '请输入正确的身份证号码'
		},
	};
	const loadingState = ref(false);
	const fileData = reactive({
		fileList1: [],
		fileList2: []
	})
	const captainInfo = ref({
		name: '',
		idcard: '',
		introduce: '',
		code: '',
		mobile: userStore.userInfo.mobile || '',
		checked: false
	});
	onLoad((option) => {
		if (option.type && option.type == 1) {
			pageType.value = option.type;
			uni.setNavigationBarTitle({
				title: '实名认证'
			});
		}
	})
	const codeChange = (text) => {
		codeTips.value = text;
	};
	const changeChecked = (e) => {
		captainInfo.value.checked = e;
	}
	const getCode = async () => {
		if (uCodeRef.value.canGetCode) {
			if (!isValidPhoneNumber(captainInfo.value.mobile)) {
				uni.$u.toast('请填写正确的手机号');
				return
			}
			uni.showLoading({
				title: '正在获取验证码',
			});
			const res = await $Api.login.getCode({
				mobile: captainInfo.value.mobile,
				event: 'authentication'
			});
			// console.log('getcode', res);
			if (res.code == '1') {
				setTimeout(() => {
					uni.hideLoading()
					uni.$u.toast('验证码已发送');
					// 通知验证码组件内部开始倒计时
					uCodeRef.value.start();
				}, 600);
			} else {
				uni.hideLoading()
				uni.$u.toast(res.msg);
			}

		} else {
			uni.$u.toast('倒计时结束后再发送');
		}
	};
	const afterRead = async (event) => { //上传图片
		// 当设置 mutiple 为 true 时, file 为数组格式，否则为对象格式
		fileData[event.name].push({
			...event.file,
			status: 'uploading',
			message: '上传中',
		})
		const result = await $Api.uploadFile.uploadFilePromise(event.file.url);
		if (result.code == '1') {
			fileData[event.name] = [{
				status: 'success',
				message: '',
				url: result.data.fullurl,
			}];
		} else {
			fileData[event.name] = [];
			uni.$u.toast(result.msg)
		}
	}
	const deletePic = (event) => {
		fileData[event.name] = [];
	}
	const submitAuthentication = async () => { //提交认证
		if (loadingState.value) return;
		const rulesTwo = {
			name: {
				required: true,
				msg: '请输入姓名'
			},
			idcard: {
				required: true,
				len: 18,
				// reg: /^[1-9]\d{5}[1-9]\d{3}((0\d)|(1[0-2]))(([0|1|2]\d)|3[0-1])\d{3}([0-9]|X)$/,
				msg: '请输入正确的身份证号码'
			},
			code: {
				required: true,
				msg: '请输入验证码'
			},
		};
		const validate = validateForm(captainInfo.value, rulesTwo); //验证
		if (!validate.status) return
		if (!captainInfo.value.checked) {
			uni.$u.toast('请先阅读并勾选协议');
			return
		}
		loadingState.value = true;

		const res = await $Api.user.postAuthentication({
			name: captainInfo.value.name,
			idcard: captainInfo.value.idcard,
			captcha: captainInfo.value.code
		});
		if (res.code == '1') {
			uni.showToast({
				title: '提交成功'
			})
			userStore.getUserInfo()
			setTimeout(() => {
				loadingState.value = false;
				uni.navigateBack();
			}, 600)
		} else {
			loadingState.value = false;
			uni.$u.toast(res.msg);
		}

	}
	const toProtocol = (type) => { //阅读协议
		uni.navigateTo({
			url: '/pages/protocol/protocol?type=' + type
		})
	}
</script>
<style lang="scss" scoped>
	.flex-start {
		align-self: flex-start;
	}

	.captainln-box {
		padding: 40rpx 32rpx;
		box-sizing: border-box;

		.captainln-from {
			width: 100%;
			box-sizing: border-box;
			width: 678rpx;
			// height: 856rpx;	
			border: 2rpx solid #3E6764;
			border-radius: 24rpx;
			padding: 26rpx 32rpx;
			flex-direction: column;
			align-items: center;

			.title {
				font-weight: 800;
				font-size: 30rpx;
				color: #E2E4E4;
			}


		}
	}

	.from-box {
		margin-top: 20rpx;
		width: 100%;

		.from-item {
			box-sizing: border-box;
			width: 100%;
			width: 100%;
			background: #283B3C;
			border-radius: 12rpx;
			padding: 24rpx 40rpx;
			margin-top: 16rpx;

			.from-name {
				display: block;
				width: 102rpx;
				font-weight: 500;
				font-size: 26rpx;
				color: #FFFFFF;
				// text-align: right;
				margin-right: 38rpx;
			}

			.getCode-btn {
				padding-left: 18rpx;
				border-left: 2rpx solid #4D4D4D;
				font-weight: 500;
				font-size: 24rpx;
				color: #66B7AF;

			}

			.upload-item {
				flex-direction: column;

				.name {
					font-size: 22rpx;
					color: #FFFFFF;
				}
			}

			.up-textarea-box {
				color: #fff;
			}

			::v-deep.placeholderClass {
				color: #5B6868 !important;
				font-size: 26rpx;
				font-weight: 500;
			}

		}

	}

	.submit-box {
		width: 336rpx;
		margin-top: 48rpx;
	}

	.agreement-box {
		margin-top: 24rpx;
		width: 100%;
		position: absolute;
		bottom: 112rpx;
		left: 0;
		justify-content: center;

		.content {
			font-weight: 500;
			font-size: 24rpx;
			margin-left: 8rpx;

			.text {
				color: #999999;
			}

			.agreement-name {
				color: #559992;
			}
		}
	}
</style>
<style>
	.u-input,
	.u-textarea__count,
	.u-textarea.data-v-b6c174a6 {
		padding: 0 !important;
		background-color: transparent !important;
	}

	textarea {
		color: #DEDEDE !important;
		/* 将字体颜色修改为深灰色 */
	}
</style>